<template>
    <div>
        <setHeader :title="headTitle" :settext="settext" @done="gotobtn()" :back-fn="gotoback"></setHeader>
        <div class="pagecontent" style="background-color: #fff;">
            <!-- 搜索同事 -->
            <div class="search_colleague">
                <i class="iconfont icon-sousuo"></i>
                <input type="text" v-model="search" placeholder="搜索同事" class="search_colleague_input">
            </div>
            <!-- <Autocomplete class="colleague_search" :colleagueplaceholder="placeholder" @colleaguedone='companyClick' :colleagueShow="true"></Autocomplete> -->
            <!-- 渲染同事 -->
            <div class="main_colleague_list">
                <div class="colleague_item clear" v-for="(colleagueitem, i) in colleagueLists" :key="i">
                    <div class="colleague_item_checkbox fl">
                        <!-- <Checkbox></Checkbox> -->
                        <Checkbox :model.sync="colleagueitem.checked"></Checkbox>
                    </div>
                    <div class="colleague_item_left fl">
                        <img :src="colleagueitem.userhead" alt="" v-if="colleagueitem.userhead">
                        <img src="../common/images/cir_07.jpg" alt="" v-else>
                    </div>
                    <div class="colleague_item_right fl">
                        <h5>{{colleagueitem.username}}</h5>
                        <span>{{colleagueitem.d_name}}</span>
                        <!-- <span @click="selectIndustry()">{{hy_name || '职位'}}<i class="iconfont icon-shixinxiajiantou colleague_icon"></i></span> -->
                    </div>
                </div>
            </div>
        </div>
        <!-- 职位 -->
        <!-- <IndustryLinkage v-show="industryShow" @departname="showIndustry" @categoryId="showIndustryId" @done="closeAdd" :jobshow="true"></IndustryLinkage> -->
    </div>
</template>

<script>
import setHeader from '@/public/setHeader';
// import Autocomplete from '@/components/companyAutocomplete';
import Checkbox from '../components/Checkbox.vue';
// import IndustryLinkage from '@/components/industry_linkage';
    export default {
        data() {
            return {
                // path:'http://fc.x.e000.com',
                headTitle: '添加同事',
                settext: '完成',
                placeholder: '搜索同事',
                search:'',   //输入关键字
                industryShow: false,
                hy_name: '',
                c_hyId: '',
                // colleagueLists: [],
                lists: [
                    // {
                    //     name: '老王',
                    //     departe: '职位'
                    // },
                    // {
                    //     name: '媚姐',
                    //     departe: '董事长'
                    // },
                ],
                deId: '',    //组织架构id
                cpId: '',    //当前企业id
            }
        },
        mounted() {
            this.cpId = this.$route.query.cp_id;
            // console.log('999',this.ddeId);
            this.getNdepart();
        },
        computed: {
            //过滤方法
            colleagueLists: function() {
                var _search = this.search;
                if (_search) {
                    //不区分大小写处理
                    var reg = new RegExp(_search, 'ig')
                    //es6 filter过滤匹配，有则返回当前，无则返回所有
                    return this.lists.filter(function(e) {
                        //匹配所有字段
                        return Object.keys(e).some(function(key) {
                            return e[key].match(reg);
                        })
                        //匹配某个字段
                        //  return e.name.match(reg);
                    })
                };
                return this.lists;
            }
        },  
        methods: {
            // 完成
            gotobtn() {
                let that = this;
                let array = [];
                this.colleagueLists.forEach(el => {
                    if (el.checked) {
                        array.push(el);
                    }
                });
                that.$emit("savedone", array);
            },
            //返回
            gotoback() {
                this.$emit('setdone');
            },
            //获取非当前组织架构之外所有的同事数据
            getNdepart(){
                this.$fetch(this.$path + '/index.php/api/company/getNdepart/'+this.ddeId+ '/' +this.cpId).then((response) => {
                    console.log('同事渲染222',response);
                    if(response.code == 200) {
                        this.lists = response.data;
                    }
                })
            },
            companyClick() {},
            // 获取企业组织架构搜索同事  li 的列表    (添加同事的接口错误)
            // getDepartUser() {
            //     this.$fetch(this.$path + '/index.php/api/company/getDepartUser/'+this.deId+ '/' +this.cpId).then((response) => {
            //         console.log('同事渲染',response);
            //         if(response.code == 200) {
            //             this.colleagueLists = response.data;
            //         }
            //     })
            // },
			//点击选择职位
            selectIndustry(){
                this.industryShow = !this.industryShow;
            },
            //选择职位
            showIndustry(data) {
                this.hy_name = data;
                this.industryShow = false;
            },
            // 选择好后关闭职位
            showIndustryId(data) {
                this.c_hyId = data;
                this.industryShow = false;
            },
            // 关闭选择职位
            closeAdd() {
                this.industryShow = false;
            },
        },
        components: {
            setHeader,
            // Autocomplete,
            Checkbox,
            // IndustryLinkage
        },
        props: ['setdone', 'savedone','ddeId']
    }
</script>

<style>
/* 搜索同事 */
.search_colleague {
    height: 0.88rem;
    line-height: 0.88rem;
    font-size: 0.24rem;
    color: #999;
    text-align: left;
    padding: 0 0.2rem;
}
.search_colleague .search_colleague_input {
    height: 0.88rem;
    line-height: 0.88rem;
    font-size: 0.24rem;
    display: inline-block;
    width: 72%;
    vertical-align: top;
}
.search_colleague .icon-sousuo {
    font-size: 0.3rem;
    color: #999;
}
.main_colleague_list {
    background-color: #fff;
    border-top: 0.2rem solid #f5f5f5;
}
/* 渲染同事-列表 */
.colleague_item {
    height: 1.48rem;
    line-height: 1.48rem;
}
/* 选择checkbox */
.colleague_item .colleague_item_checkbox {
    width: 13%;
    line-height: 1.48rem;
    height: 1.48rem;
    margin-top: -0.1rem;
}
.colleague_item .colleague_item_left {
    width: 1rem;
    height: 1rem;
    margin: 0.24rem;
    box-sizing: border-box;
}
.colleague_item .colleague_item_left img {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
}
.colleague_item .colleague_item_right {
    width: 66.8%;
    height: 1.48rem;
    padding: 0.24rem;
    text-align: left;
    box-sizing: border-box;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
    border-bottom: 1px solid #d8d8d8;
}
.colleague_item .colleague_item_right h5 {
    font-size: 0.28rem;
    color: #333;
    line-height: 0.48rem;
    height: 0.48rem;
    text-align: left;
    margin-top: 0.1rem;
}
.colleague_item .colleague_item_right span {
    font-size: 0.24rem;
    color: #999;
    padding-bottom: 0;
    background-color: transparent;
    height: 0.48rem;
    line-height: 0.48rem;
    float: left;
}
.colleague_item .colleague_item_right span .colleague_icon {
    font-size: 0.2rem;
    color: #ccc;
    background-color: #fff;
    padding: 0.02rem;
    border-radius: 2px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    text-align: center;
    margin-left: 0.1rem;
}
</style>